<template>
    <div>
        <baidu-map class="map" :center="city" :scroll-wheel-zoom="true" @click="getLocation">
            <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-control>
                <bm-auto-complete v-model="keyword">
                    <input v-model="keyword" placeholder="请输入关键字搜索">
                </bm-auto-complete>
            </bm-control>
            <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
            <bm-marker :position="currentPostion" :dragging="true"></bm-marker>
        </baidu-map>
    </div>
</template>
<style>
.map {
    width: 100%;
    height: 400px;
}
</style>
<script>

export default {
    data() {
        return {
            keyword: '',
            city: '重庆',
            currentPostion: '',
            currentLocation: ''
        }
    },
    methods: {
        getLocation(e) {
            const myGeo = new BMap.Geocoder() // 创建地址解析器的实例
            myGeo.getLocation(e.point, rs => {
                // console.log(rs.address);
                // console.log(rs.surroundingPois) // 附近的点(array)
                // console.log(rs.business) // 商圈字段
                // let adr = rs.addressComponents
                // this.address = adr.province + adr.city + adr.district +adr.street + adr.streetNumber // 省市区街道门牌号
                //console.log(rs);
                this.currentPostion = rs.point;
                this.currentLocation = rs.address + (rs.surroundingPois.length==0?'':rs.surroundingPois[0].title);
                console.log(this.currentLocation);
            })
        }
    }
}
</script>